<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2022/4/23
  Time: 10:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
    <!--- web路径：
        从/开始的相对路径，找资源，以当前的路径为基准，经常容易出问题
        开始的相对路径，找资源，以服务器的路径为标准（http://localhost:3306）;需要加上项目名称
                    http://localhost:3306/ssm_crud
    -->
    <!--引入样式，放在所有css样式前面-->
    <script src="http://code.jquery.com/jquery-3.4.1.js"></script>
    <link href="${APP_PATH}/static/bootstrap-3.4.1-dist/bootstrap-3.4.1-dist/css/bootstrap.css"/>
    <script src="${APP_PATH}/static/bootstrap-3.4.1-dist/bootstrap-3.4.1-dist/js/bootstrap.js"></script>

<%--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-p1KAotb3W9ndluCsqePPYnjRm3c6abdnIjo0tQwYUv83VsbsYd43RuofnFAaDo0E" crossorigin="anonymous">--%>
<%--    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>--%>
<%--    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-E5Sj1saJVFNzWWK3YIJB4LEDEEVEGaOdfmCprPDkfWUo+xkb6Ep52Q1TMEtgcFwi" crossorigin="anonymous"></script>--%>
</head>
<body>
<!--搭建显示页面-->
<div class="container">
    <!--标题-->
    <div class="row">
        <div class="col-md-12">
            <h1>SSM-CRUD</h1>
        </div>
    </div>
    <!--按钮-->
    <div class="row">
        <div class="col-md-4 col-md-offset-8">
            <button class="btn btn-primary">新增</button>
            <button class="btn btn-danger">删除</button>
        </div>
    </div>
    <!--显示表格数据-->
    <div class="row">
        <div class="col-md-12">
            <table id="emps_table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>empName</th>
                        <th>gender</th>
                        <th>email</th>
                        <th>操作</th>
                        <th>删除</th>
                    </tr>
                </thead>
                <tbody></tbody>

            </table>
        </div>
    </div>
    <!--分页信息-->
    <div class="row">
        <!--分页信息-->
        <div class="col-md-6" id="page_info_area"></div>
        <div class="col-md-6" id="page_nav_area">

        </div>
    </div>
</div>

<script type="text/javascript">
    //1、页面加载完成以后，直接去发送ajax请求，要到分页数据

    $(function () {
        to_page(1);
    });

    function to_page(pn){
        $.ajax({
            url:"${APP_PATH}/emps",
            data:"pn=" + pn,
            type:"GET",
            success:function (result) {
                build_emps_table(result);
                build_page_info(result);
                build_page_nav(result);
            }
        });
    }


    function build_emps_table(result) {
        //清空
        $("#emps_table tbody").empty();
        var emps = result.extend.pageInfo.list;
        $.each(emps, function (index, item) {
            var empIdTd = $("<td></td>").append(item.empId);
            var empNameTd = $("<td></td>").append(item.empName);
            var empGender = $("<td></td>").append(item.gender==='M'?"男":"女");
            var empEmail = $("<td></td>").append(item.email);
            var deptName = $("<td></td>").append(item.dept.deptName);
            var editBtn = $("<button></button>").append("<span></span>").append("编辑");
            var delBtn = $("<button></button>").append("<span></span>").append("删除");
            var btnTd = $("<td></td>").append(editBtn).append(delBtn);
            //append方法执行完成以后还会返回原来的元素
            $("<tr></tr>").append(empIdTd)
                .append(empNameTd)
                .append(empGender)
                .append(empEmail)
                .append(deptName)
                .append(btnTd)
                .appendTo("#emps_table tbody");
        });
    }

    //解析显示分页条
    function build_page_nav(result) {
        $("#page_nav_area").empty();
        var ul = $("<ul></ul>").addClass("pagination");

        var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href", "#"));
        var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
        if (result.extend.pageInfo.hasPreviousPage === false) {
            firstPageLi.addClass("disabled");
            prePageLi.addClass("disabled");
        }

        //为元素添加点击事件
        firstPageLi.click(function () {

        });

        prePageLi.click(function () {

        });

        var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
        var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href", "#"));
        if (result.extend.pageInfo.hasNextPage === false) {
            nextPageLi.addClass("disabled");
            lastPageLi.addClass("disabled");
        }

        //添加首页和前一页的提示
        ul.append(firstPageLi).append(prePageLi);

        $.each(result.extend.pageInfo.navigatepageNums, function (index, item) {
           var numLi = $("<li></li>").append($("<a></a>")).append(item) ;
           if (result.extend.pageInfo.pageNum === item) {
               numLi.addClass("active");
           }
           numLi.click(function () {
              to_page(item);
           });
           ul.append(numLi);
        });
        //添加下一页和末页的提示
        ul.append(nextPageLi).append(lastPageLi);

        var  navEle = $("<nav></nav>").append(ul);
        navEle.appendTo("#page_nav_area");
        // $("#page_nav_area").append(ul);
    }

    //点击新增按钮弹出模态框
    $("#emp_add_modal_btn").click(function () {
        //发送ajax请求，查出部门信息，显示在下拉列表中
        $.ajax()

        //弹出模态框
        $("empAddModal").modal({
            backdrop:"static",
        });
    });

    //查出所有的部门信息并显示在下拉列
    function getDepts() {
        $.ajax({
            url:"${APP_PATH}/depts",
            type:"GET",
            success:function (result) {
                $.each(result.extend.depts, function () {
                    var deptId = this.deptId;
                    var deptName = this.deptName;
                })
            }
        });
    }

    //解析显示分页信息
    function build_page_info(result) {
        $("#page_info_area").empty();
        $("#page_info_area").append("当前" + result.extend.pageInfo.pageNum + "页，总页数为" +
                    result.extend.pageInfo.pages + "页，总" +
                    result.extend.pageInfo.total + "条记录");
    }

    //校验用户名和邮箱的逻辑
    function validate_add_form() {
        //1、拿到要校验的数据，使用正则表达式
        var empName = $("#empName_add_input").val();
        var regName = /(^[a-z0-9_-]{3,16}$)|(^[\u2E80-\u9FFF]+$)/;
        if (!regName.test(empName)) {
            alert("用户名不规范！");
            return false;
        }

        //2、校验邮箱信息
        var email = $("#email_add_input").val();
        var regEmail = 	/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
        if (! regEmail.test(email)) {
            alert("失败！");
            return false;
        }

        return true;
    }

    //点击保存，保存员工
    $("#emp_save_btn").click(function () {
        //1、模态框中填写的表单数据提交给服务器进行保存
        $.ajax({
            url:"${APP_PATH}/insertEmp",
            type:"POST",
            data:$("#empAddModal form").serialize(),
            success:function (result) {
                if(result.code === 100) {
                    //员工保存成功
                    //1、关闭模态框
                    $("#empAddModal").modal('hide');
                    //2、来到最后一页
                    to_page();
                } else {
                    //显示失败信息

                }

            }
        });
    });

    function getEmp(id) {
        $.ajax({
           url:"${APP_PATH}/emp/" + id,
           type:"GET",
           success:function (result) {
               console.log(result)
           }
        });
    }

</script>

</body>
</html>
